<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="title">
        DataView - <span class="subitem">MultiViewState</span>
    </ui:define>

    <ui:define name="head">
        <style type="text/css">         
            /*demo*/
            .ui-dataview-list .ui-dataview-row {
                border-bottom: 1px solid #A8A8A8;
                padding: 25px 10px;
                /* with the exported variables from Nova and Luna Themes*/
                border-bottom-color: var(--input-border-color, #A8A8A8);
            }

            .logo {
                width: 5%;
            }
            .detail {
                width: 85%;
                padding-left: 25px;
            }
        </style>
    </ui:define>

    <ui:define name="description">
        MultiViewState feature enables DataView to maintain its state across pages by setting multiViewState attribute to true. In this demo, use pagination or change layout, then visit another page and then come back to this page. DataView state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/dataview" />

    <ui:define name="implementation">
        <h:form id="form">
            <p:messages id="messages" />

            <p:commandButton value="Clear multiViewSate" action="#{dataGridView.clearMultiViewState}" update="@form"/>

            <br/><br/>

            <p:dataView var="car" value="#{dataGridView.cars}" multiViewState="true" rows="12" paginator="true" rowsPerPageTemplate="6,12,16"
                        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        gridIcon="pi pi-th-large" listIcon="pi pi-bars">

                <p:dataViewGridItem>
                    <p:panel header="#{car.id}" style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%">
                            <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 

                            <h:outputText value="#{car.brand}" />

                            <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                                <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" />
                                <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                            </p:commandLink>
                        </h:panelGrid>
                    </p:panel>
                </p:dataViewGridItem>

                <p:dataViewListItem>
                    <h:panelGrid columns="3" style="width:100%" columnClasses="logo,detail">
                        <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> 

                        <p:outputPanel>
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputText value="Id:" />
                                <h:outputText value="#{car.id}" style="font-weight: bold"/>

                                <h:outputText value="Year:" />
                                <h:outputText value="#{car.year}" style="font-weight: bold"/>

                                <h:outputText value="Color:" />
                                <h:outputText value="#{car.color}" style="font-weight: bold"/>
                            </h:panelGrid>
                        </p:outputPanel>

                        <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                            <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" />
                            <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                        </p:commandLink>
                    </h:panelGrid>
                </p:dataViewListItem>
            </p:dataView>

            <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                <p:outputPanel id="carDetail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> 
                        </f:facet>

                        <h:outputText value="Id:" />
                        <h:outputText value="#{dataGridView.selectedCar.id}" />

                        <h:outputText value="Year" />
                        <h:outputText value="#{dataGridView.selectedCar.year}" />

                        <h:outputText value="Color:" />
                        <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>

                        <h:outputText value="Price" />
                        <h:outputText value="$#{dataGridView.selectedCar.price}" />
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
        </h:form>
    </ui:define>

</ui:composition>
